<template>
    <swipeout class="goodlistul">
		<p> </p>
        <swipeout-item v-for="item in list" :key="item.id" class="goodsdetail" :threshold=".5" underlay-color="#ccc" :class="{noSales: item.noSales, notbegin: item.notbegin}">
            <div slot="right-menu">
            	<swipeout-button @click.native="updateCenterCart({type: 'del', item})" background-color="#D23934">删除</swipeout-button>
            </div>
            <div slot="content" class="demo-content vux-1px-tb">
                <label>
                    <span class="m-cb">
						<input type="checkbox" 
							@click="updateCenterCart({type: 'checked', item})" 
							:checked="item.mainCmmdtyInfo.mainCmmdtyDetailInfo.tickStatus==1?true:false"
							:disabled="item.noSales" v-if="!item.cmmdtyHeadInfo.error">
						<i v-if="!item.cmmdtyHeadInfo.error"></i>
					</span>
                    <router-link class="proimg" :to="'/detail/'+item.mainCmmdtyInfo.mainCmmdtyDetailInfo.cmmdtyCode+'/'+item.mainCmmdtyInfo.mainCmmdtyDetailInfo.shopCode">
						<img :src="item.mainCmmdtyInfo.mainCmmdtyDetailInfo.cmmdtyCode | newImgUrl(item.mainCmmdtyInfo.mainCmmdtyDetailInfo.imgFlag)" @error="error">
						<!--<p v-show="parseInt(item.mainCmmdtyInfo.mainCmmdtyDetailInfo.remanentQty)<=10">仅剩{{item.mainCmmdtyInfo.mainCmmdtyDetailInfo.remanentQty}}件</p>-->
					</router-link>
					<router-link :to="'/detail/'+item.mainCmmdtyInfo.mainCmmdtyDetailInfo.cmmdtyCode+'/'+item.mainCmmdtyInfo.mainCmmdtyDetailInfo.shopCode">
						<div>
							<p class="name">
								{{ item.mainCmmdtyInfo.mainCmmdtyDetailInfo.cmmdtyName }}
							</p>
							<a href="javascript:;" class="delete"></a>
							<p class="specifications">
								{{ item.mainCmmdtyInfo.mainCmmdtyDetailInfo.cmmdtyStandard }}/{{ item.mainCmmdtyInfo.mainCmmdtyDetailInfo.cmmdtyUnit }}
							</p>
							<p style="overflow:auto;-webkit-line-clamp:2">
								<em>
									&yen;{{ item.mainCmmdtyInfo.mainCmmdtyDetailInfo.salesPrice }}
								</em>
							</p>
							<span v-if="item.cmmdtyHeadInfo.subActivityType==1" class="act-type">大聚惠</span>
							<span v-if="item.cmmdtyHeadInfo.subActivityType==2" class="act-type">抢购</span>
						</div>
					</router-link>
                </label>
                <div class="ops" v-if="!item.noSales">
                    <a href="javascript:void(0)" class="minus" @click="updateCenterCart({type: 'minus', item})"></a>
                    <input type="text" :value="item.mainCmmdtyInfo.mainCmmdtyDetailInfo.cmmdtyQty" readonly>

                    <a v-if="!item.cmmdtyHeadInfo.isOffline&&parseInt(item.mainCmmdtyInfo.mainCmmdtyDetailInfo.cmmdtyQty)<99" href="javascript:void(0)" class="add" @click="updateCenterCart({type: 'add', item})"></a>
					<a v-else href="javascript:void(0)" class="add disabled"></a>

                </div>
				<div class="ops" v-else>
					<input type="text" value="清除" @click="updateCenterCart({type: 'del', item})" readonly>
                </div>
				<template v-if="item.cmmdtyHeadInfo.isOffline">
					<span v-if="item.cmmdtyHeadInfo.subActivityType==1||item.cmmdtyHeadInfo.subActivityType==2">{{ item.cmmdtyHeadInfo.isOfflineMsg }}</span>
					<span v-else>仅剩{{ item.mainCmmdtyInfo.mainCmmdtyDetailInfo.arrivalQty }}件</span>
				</template>
            </div>
        </swipeout-item>
    </swipeout>
</template>
<script>
import { mapActions } from 'vuex'
import { Swipeout, SwipeoutItem, SwipeoutButton } from 'vux'
export default {
    components: {
		Swipeout,
		SwipeoutItem,
        SwipeoutButton
	},
    methods: {
		...mapActions ([
			'updateCenterCart'
		]),
		
		error(e) {
			e.target.src = "/static/images/pro-default.png"
		}
	},
    props: ['list']
}
</script>
<style lang='scss' scoped>
	@function _($px) {
		$rem: $px/50;
		@return #{$rem}rem;
	}
    .m-cb {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		width: .88rem;
			height: .88rem;
		input[type=checkbox] {
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
			width: .88rem;
			height: .88rem;
			cursor: pointer;
		}
		i {
			float: left;
			width: .88rem;
			height: .88rem;
			background: url(../images/unchecked.png) no-repeat;
			background-size: contain;
			margin-right: 5px;
		}
		input[type=checkbox]:checked+i {
		    background-image: url(../images/checked.png)
		}
	}
	.goodlistul .goodsdetail .demo-content {
		font-size: .56rem;
		background: #fff;
		position: relative;
		transition: all .5s;
		box-sizing: border-box;
		padding: .56rem 0 .56rem .8rem;
		border-bottom: 1px solid #e8e8e8;
		.m-cb{
			float: left;
			margin-top: 1.2rem;
    		margin-right: .4rem;
		}
		label {
			line-height: 1;
			display: block;
			//height: 3.68rem;
			z-index: 4;
		}
		span{
		    display: block;
			text-align: right;
			color:#ff782d;
			margin-top: .3rem;
			margin-right: .48rem;
		}
		.proimg{
			display: inline-block;
			position: relative;
			width: 3.2rem;
			height: 3.2rem;
			p{
				position: absolute;
				bottom:0;
				left:0;
				right:0;
				width: 3.2rem;
				height: 0.6rem;
				line-height: 0.6rem;
				background-color: rgba(0,0,0,.3);
				color: #fff;
				text-align: center;
				font-size:_(24)
			}
		}
		img {
			width: 3.2rem;
			height: 3.2rem;
			margin-right: .24rem;
			float: left
		}
		div {
			float: right;
			width: 9rem;
			position: relative
		}
		p {
			width: 8.76rem;
			letter-spacing: .88px;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: block-axis;
			text-overflow: ellipsis;
			overflow: hidden;
			margin-bottom: .02rem;
			line-height: .7rem;
			em {
				color:#ff782d;
				font-size: .48rem
			}
		}
		.act-type{
				display: inline-block;
				color:#ff782d;
				border: 1px solid #ff782d;
				height:_(35);
				line-height:_(35);
				border-radius: _(35);
				font-size: _(24);
				padding:0 _(10);
				margin-top:_(20)
			}
		b {
			font-weight: normal;
			font-size: .48rem;
			background: #f00;
			color: #fff;
			padding: .02rem .12rem;
			padding-left: .08rem;
			padding-right: .08rem
		}
		.name {
			color: #333
		}
		.specifications {
			color: #999;
			font-size: .48rem
		}
		strong {
			margin-left: .4rem;
			padding: 0 .36rem;
			color: #f60;
			border: 1px solid #f60;
			border-radius: 77px;
			font-weight: normal
		}
		.ops {
			width: _(206);
			height: _(66);
			float: right;
			margin-right: .48rem;
			border: 1px solid #d9d9d9;
			border-radius: 1.04rem;
			font-size: 0;
			position: absolute;
			top: 2.4rem;
			right: 0;
			text-align: center;
			a {
				font-size: .52rem;
				color: #666;
				width: _(66);
				height: _(66);
				line-height: _(66);
				display: inline-block;
				text-align: center;
				vertical-align: top;
				-webkit-appearance: none
			}
			input {
				font-size: .52rem;
				color: #666;
				width: _(66);
				height: 100%;
				line-height: _(66);
				display: inline-block;
				text-align: center;
				vertical-align: top;
				border: none;
				-webkit-appearance: none
			}
			.add {
				background: url(/static/images/plus.png) no-repeat center;
				background-size: _(20);
			}
			.minus {
				background: url(/static/images/minus.png) no-repeat center;
				background-size: _(20) _(3);
			}
			.disabled {
				color: #d9d9d9
			}
			input {
				border-radius: 0
			}
		}
	}
	.goodlistul .goodsdetail.noSales{
			.demo-content {
				.name{
					color: #999;
				}
				.proimg:after{
					display: block;
					width: 100%;
					height: 100%;
					content: " ";
					position: absolute;
					top: 50%;
					left: 50%;
					background: url('/static/images/soldout_old.png') center center no-repeat;
					background-size: _(136) _(117);
					transform: translate(-50%, -50%);
					-webkit-transform: translate(-50%, -50%);
				}
				p{
					em{
						color: #999;
					}
				}
				
			}
			&.notbegin .proimg:after {
				background-image: url(/static/images/soldout_notbegin.png);
			}
		}
</style>